<link rel="stylesheet" href="../css/element.css">
<link rel="stylesheet" href="../css/index.css">

<script src="../js/vue.js"></script>
<script src="../js/element.js"></script>
<script src="../js/index.js"></script>
<div id="app">
<div class="block">
  <el-input style="width:50%" v-model="input" placeholder="添加主题"></el-input>
  
  <br>
  <br>
  <el-date-picker
      v-model="value9"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right">
    </el-date-picker>
</div>
<br>
<el-select v-model="value" placeholder="请选择">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>
<br>
<p>日程详情</p>

<i class="el-icon-s-home"></i>

<el-popover
  placement="right"
  width="200"
  trigger="click">
  <el-tabs v-model="activeName" @tab-click="handleClick">

    <el-tab-pane label="可用会议室" name="first">
      <p  v-for="item in avilables" :key="item.value">
          {{ item.label }}
      </p>
    </el-tab-pane>
    <el-tab-pane label="全部会议室" name="second">
      <p  v-for="item in all" :key="item.value">
        {{ item.label }}
    </p>
    </el-tab-pane>
  </el-tabs>
  <el-button slot="reference">添加会议室</el-button>
</el-popover>

<i class="el-icon-s-custom"></i>
<el-button>添加参与者</el-button>

<i class="el-icon-share"></i>

<el-button>生成会议链接</el-button>
<br>
<br>
<i class="el-icon-bell"></i>
<el-select v-model="value2" placeholder="请选择">
  <el-option
    v-for="item in options2"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>
<br>
<br>
<i class="el-icon-user"></i>
<el-select v-model="value3" placeholder="请选择">
  <el-option
    v-for="item in options3"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>
<br>
<br>

<i class="el-icon-warning-outline"></i>
<el-select v-model="value4" placeholder="会议重要程度">
  <el-option
    v-for="item in options4"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

<br>
<div style="margin: 20px 0;"></div>
<el-input
  type="textarea"
  placeholder="添加描述"
  v-model="textarea"
  maxlength="50"
  show-word-limit
>
</el-input>
<br><br>
<el-button style="margin-left: 450px;" type="primary">提交</el-button>
<script>
  
  var Main = {
    data() {
      return {
        all:[{
          value: '选项1',
          label: 'A801'
        },{
          value: '选项2',
          label: 'A803'
        },{
          value: '选项3',
          label: 'A301'
        },{
          value: '选项4',
          label: 'B412'
        },{
          value: '选项5',
          label: 'B415'
        },{
          value: '选项6',
          label: 'C307'
        },{
          value: '选项7',
          label: 'A502'
        },{
          value: '选项8',
          label: 'A701'
        },{
          value: '选项9',
          label: 'A102'
        },],
        avilables:[{
          value: '选项1', 
          label: 'A801'
        }, {
          value: '选项2',
          label: 'B412'
        }, {
          value: '选项3',
          label: 'B415'
        }, {
          value: '选项4',
          label: 'A307'
        }],
        options: [{
          value: '选项1',
          label: '不重复'
        }, {
          value: '选项2',
          label: '每天重复'
        }, {
          value: '选项3',
          label: '每周重复'
        }, {
          value: '选项4',
          label: '每月重复'
        }, {
          value: '选项5',
          label: '每年重复'
        }, {
          value: '选项6',
          label: '每个工作日重复'
        }, {
          value: '选项7',
          label: '自定义重复'
        }],
        options2: [{
          value: '选项1',
          label: '事件发生时'
        }, {
          value: '选项2',
          label: '提前5分钟'
        }, {
          value: '选项3',
          label: '提前15分钟'
        }, {
          value: '选项4',
          label: '提前30分钟'
        }, {
          value: '选项5',
          label: '提前1小时'
        }, {
          value: '选项6',
          label: '提前2小时'
        }, {
          value: '选项7',
          label: '提前1天'
        }],
        options3: [{
          value: '选项1',
          label: '会议负责人'
        }],
        options4: [{
          value: '选项1',
          label: '一般'
        }, {
          value: '选项2',
          label: '重要'
        }, {
          value: '选项3',
          label: '紧急'
        }],
        value: '不重复',
        value2:'提前5分钟',
        value3:'会议负责人',
        value4:'',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        activeName: 'first',
        input: '',
        value9: '',
      };
    },
    methods:{
      
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>